<template>
  <view class="status-indicator" :class="statusClass">
    <text class="status-dot"></text>
    <text class="status-text">{{ statusText }}</text>
  </view>
</template>

<script>
export default {
  name: 'UserStatusIndicator',
  props: {
    status: {
      type: String,
      default: 'offline',
      validator: function(value) {
        return ['online', 'offline', 'away', 'busy'].indexOf(value) !== -1;
      }
    },
    showText: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    statusClass() {
      return `status-${this.status}`;
    },
    statusText() {
      if (!this.showText) return '';
      switch(this.status) {
        case 'online': return '在线';
        case 'offline': return '离线';
        case 'away': return '离开';
        case 'busy': return '忙碌';
        default: return '';
      }
    }
  }
};
</script>

<style scoped>
.status-indicator {
  display: flex;
  align-items: center;
  position: relative;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 4px;
}

.status-online .status-dot {
  background-color: #1aad19;
}

.status-offline .status-dot {
  background-color: #888;
}

.status-away .status-dot {
  background-color: #ff9900;
}

.status-busy .status-dot {
  background-color: #f44;
}

.status-text {
  font-size: 12px;
  color: #888;
}
</style>